<template>
	<view class="">
		<view class="video_box">
			<!-- 'https://images.weserv.nl/?url=' + -->
			<video :src="contData.live_data.url" controls :autoplay="false" :poster="contData.live_data.img_path" width="100%"></video>
		</view>
		<view class="px-2 py-1">
			<view class="px-2 pt-2 pb-1 bg-white rounded shadow">
				<view class="font-weight-bold font">{{ contData.live_data.title }}</view>
				<view class="flex justify-between font_24 c_9 my-1">
					<text @click="goPages('/subPages/home/video/column?id=' + contData.special_column.id)">{{ contData.special_column.title || '' }} ></text>
					<text>来源：{{ contData.live_data.source || contData.special_column.source }}</text>
				</view>
				<view class="flex align-end justify-between font_24" v-if="contData.special_column.content">
					<view class="c_9 text_hidden2" style="width: 90%">{{ contData.special_column.content }}</view>
					<view class="c_6" style="width: 10%" @click="lookMore">更多></view>
				</view>
				<!-- 底部点赞/收藏/转发操作栏 -->
				<view class="news_footer mt-2">
					<favorite-bottom
						:numdata="contData.check_operate"
						:new-id="contData.live_data.id"
						:type="1"
						:platform="contData.live_data.platform"
						@loginSuccess="loginSuccess"
					></favorite-bottom>
				</view>
			</view>
			<u-modal :show="contShow" title="详情" confirmText="关闭" @confirm="confirm">
				<view class="slot-content">
					<scroll-view scroll-y="true">
						<view class="view">{{ contData.special_column.content }}</view>
					</scroll-view>
				</view>
			</u-modal>
			<view class="p-2 bg-white rounded shadow mt-1">
				<title-view :tit="contData.special_column.title + ' · 专栏列表'" @lookall="goPages('/subPages/home/video/column?id=' + contData.special_column.id)"></title-view>
				<view class="column_list my-2">
					<scroll-view scroll-x="true" @scrolltolower="scrolltolowerFun" class="scroll_cont">
						<view
							class="column_item bg_main rounded text-white font_22 mr-2"
							v-for="(item, index) in columnList"
							:key="index"
							v-if="index < 5"
							@click="columnChange(item)"
						>
							<text class="tit">{{ item.title }}</text>
							<text class="tag font-small text-white rounded" v-if="item.label">{{ item.label }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="p-2 bg-white rounded shadow mt-1">
				<title-view tit="其他推荐" :look="false"></title-view>
				<live-list v-if="contData.keyword && contData.keyword.length >= 1" :cont-list="contData.keyword"></live-list>
				<view v-else class="p-2"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无推荐内容"></u-empty></view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/js/util.js';
import titleView from '@/components/titleView/title.vue';
import liveList from '@/components/live_list/live_list.vue';
import { videoliveShow, specialColumnList } from '@/api/home/video/video.js';
import favoriteBottom from '@/components/favorite_bottom/favorite_bottom.vue';
export default {
	components: { titleView, liveList, favoriteBottom },
	data() {
		return {
			contShow: false,
			contData: {},
			columnList: [],
			page: 1,
			videoId: ''
		};
	},
	onLoad(option) {
		this.videoId = option.id;
		this.getInfo();
	},
	methods: {
		// 获取视频详情
		getInfo() {
			videoliveShow({ id: this.videoId }).then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.contData = res.data;
					this.getColumn();
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		// 专栏列表
		getColumn() {
			let msg = {
				page: this.page,
				id: this.contData.live_data.id
			};
			specialColumnList(msg).then(res => {
				// console.log(res);
				if (res.code == 0) {
					this.columnList = res.data;
					// if (res.data.length == 0) {
					// 	this.suo = false;
					// } else if (res.data.length < 10) {
					// 	this.suo = false;
					// } else {
					// 	this.suo = true;
					// }
				} else {
					uni.$u.toast(res.msg);
				}
			});
		},
		// scrolltolowerFun() {
		// 	if (this.suo) {
		// 		this.page = ++this.page;
		// 		setTimeout(() => {
		// 			this.getColumn();
		// 		}, 1000);
		// 	}
		// },
		// 切换视频
		columnChange(val) {
			if (val.type == 1) {
				this.getInfo(val.id);
			} else {
				// this.goPages('/subPages/web_view_h5/index?url=' + val.url + '&title=' + val.title);
				// 跳转视频号直播
				util.channelsLice(val.start_time, val.end_time);
			}
		},
		lookMore() {
			this.contShow = true;
		},
		confirm() {
			this.contShow = false;
		},
		// 快捷登录后更新点赞收藏状态
		loginSuccess() {
			this.getInfo();
		}
	}
};
</script>

<style lang="scss" scoped>
.video_box {
	width: 100%;

	video {
		width: 100%;
		height: 395rpx;
	}
}

.popup {
	max-height: 800rpx;
}

.column_list {
	.scroll_cont {
		white-space: nowrap;
	}

	.column_item {
		width: 280rpx;
		height: 130rpx;
		padding: 15rpx 25rpx;
		display: inline-block;
		position: relative;
		overflow: hidden;

		.tit {
			width: 100%;
			overflow-wrap: break-word;
			white-space: normal !important;
		}

		.tag {
			position: absolute;
			bottom: 8rpx;
			right: 8rpx;
			padding: 0rpx 8rpx;
			background-color: dimgrey;
		}
	}
}
.news_footer {
	border-top: 2px solid #efefef;
}
</style>
